<template>
    <el-button @click="openModal()" style="width: 100%;">添加电缆</el-button>
    <a-table :columns="columns" :data-source="dataSource" :scroll="{ x: 1000 }">
        <template #bodyCell="{ column, text, record }">
            <template v-if="['diameter', 'bottom', 'top', 'weight'].includes(column.dataIndex)">
                <div>
                    <a-input-number v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-if="['name'].includes(column.dataIndex)">
                <div>
                    <a-input v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <span>
                        <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="dele(record.id)">
                            <a-button type="link" danger>删除</a-button>
                        </a-popconfirm></AntdZh>
                    </span>
                </div>
            </template>
        </template>
    </a-table>


    <!-- 电缆选择弹窗 -->
    <el-dialog v-model="show" title="电缆选择" width="700px" :close-on-click-modal="false" append-to-body>
        <div>
            <el-table :data="form" height="350" style="width: 100%" highlight-current-row ref="singleTableRef"
                @current-change="handleCurrentChange">
                <el-table-column prop="cableId" label="电缆型号" width="180" align="center" />
                <el-table-column prop="diameter" label="电缆直径(mm)" align="center" />
                <el-table-column prop="top" label="顶部深度(m)" align="center" />
                <el-table-column prop="bottom" label="底部深度(m)" align="center" />
                <el-table-column prop="weight" label="单位质量(kg/m)" align="center" />
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" v-if="false" @click="add">绑定</el-button>
                <el-button type="primary" v-if="!false" @click="add">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
import { cablesList, createCables, delCables } from "@/api/structure/structure.js";

const show = ref(false);
const editableData = reactive({});
const dataSource = ref([]);
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const cableData = ref(
    { diameter: 400, bottom: 1000, top: 0 })
const columns = [
    {
        title: '操作',
        dataIndex: 'operation',
        id: 'operation',
        width: 200,
    }, {
        title: '电缆型号',
        dataIndex: 'cableId',
        id: 'cableId',
        width: 150,
    }, {
        title: '电缆直径(mm)',
        dataIndex: 'diameter',
        id: 'diameter',
        width: 150,
    }, {
        title: '顶部深度(m)',
        dataIndex: 'top',
        id: 'top',
        width: 150,
    }, {
        title: '底部深度(m)',
        dataIndex: 'bottom',
        id: 'bottom',
        width: 150,
    }, {
        title: '单位质量(kg/m)',
        dataIndex: 'weight',
        id: 'weight',
        width: 150,
    }];

//增
const add = () => {
    createCables(form.value).then(res => {
        console.log(res)
        show.value = false
        getList()
    })
}
//删
const dele = id => {
    delCables(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
        delete editableData[id];
    })
}
// 查
function getList() {
    let data = localStorage.getItem("wellData");
    console.log(data)
    cablesList(data).then((response) => {
        console.log('getList', response);
        form.value = response.content;
    });
}
getList()

function handleCurrentChange(selection) {
    cableData.value.diameter = selection.diameter
}
function openModal() {
    show.value = true;
    getList()
}
</script>
<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>